import React from 'react'
import { FlatList, StyleSheet, TouchableOpacity, View, Image, ImageBackground, ScrollView, Dimensions } from 'react-native';
import { Entypo } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { Divider } from '@rneui/themed';
import { Text, Card, PricingCard, lightColors, Button, Icon } from '@rneui/themed';

const users = [
    {
        name: '董楚涵',
        avatar: require('../../../images/mine/member1.jpg'),
        position:'项目经理'
    },
    {
        name: '牛子斋',
        avatar:require('../../../images/mine/member2.jpg'),
        position: '开发工程师，UI设计师'
    },
    {
        name: '白雨菲',
        avatar: require('../../../images/mine/member3.jpg'),
        position: '开发工程师，测试工程师'
    },
];

const Withus = ({ navigation }) => {
    const { navigate } = navigation;
    return <ScrollView>
        <View style={styles.container}>
            <Card>
                <Card.Title>百草园</Card.Title>
                <Card.Divider />
                <Card.Image
                    style={{ padding: 0 }}
                    source={require('../../../images/mine/bg.jpg')}
                />
                <Text style={{ marginBottom: 10, marginTop: 10, textAlign: 'center' }}>
                    你的心灵休憩之处
                </Text>
            </Card>

            <Card containerStyle={{ marginTop: 15 }}>
                <Card.Title>介绍</Card.Title>
                <Text style={{ marginTop: -10, marginBottom: 8, color: 'lightgrey', fontSize: 15, textAlign: 'center' }}>INTRODUCTION</Text>
                <Card.Divider />
                <Text style={styles.fonts}>
                    现代的生活节奏越来越快，人们有着各种压力，往往做出了许多努力却得不到成果，处在紧张生活的城市中的人们，寻求一种全新的方式来放松自己，追求一种平静惬意生活的感受。
                </Text>
                <Text style={styles.fonts}>
                    土地是不会骗人的，有努力就有收获，有付出才能得到到回报，或许您在日常生活中没有条件亲手呵护一株生命，那么就选择百草园APP吧。
                </Text>
                <Text style={styles.fonts}>
                    百草园APP旨在为紧张生活的人们提供一种现代化的放松方式，种下一颗种子，看着它抽枝发芽，在转换心情的同时也会获得成就感；同时，我们为各位提供了各种植物的种植注意事项，以及种植经验交流贴，您对植物付出一点一滴的呵护，植物也时时刻刻陪伴着您。
                </Text>
            </Card>

            <Card containerStyle={{ marginTop: 15 }}>
                <Card.Title>地址</Card.Title>
                <Text style={{ marginTop: -10, marginBottom: 8, color: 'lightgrey', fontSize: 15, textAlign: 'center' }}>ADDRESS</Text>
                <Card.Divider />
                <Text style={styles.fontsCenter}>https://gitee.com/yannnnnnnnn/herb-garden</Text>
            </Card>


            <Card containerStyle={{ marginTop: 15 }}>
                <Card.Title>小组名称</Card.Title>
                <Text style={{ marginTop: -10, marginBottom: 8, color: 'lightgrey', fontSize: 15, textAlign: 'center' }}>Team-Name</Text>
                <Card.Divider />
                <Text style={styles.fontsCenter}>支持正义下班</Text>
            </Card>

            <Card>
                <Card.Title>小组成员</Card.Title>
                <Text style={{ marginTop: -10, marginBottom: 8, color: 'lightgrey', fontSize: 15, textAlign: 'center' }}>CREATERS</Text>
                <Card.Divider />
                {users.map((u, i) => {
                    return (
                        <View key={i} style={styles.user}>
                            <Image
                                style={styles.image}
                                resizeMode="cover"
                                source={u.avatar}
                            />
                            <Text style={styles.name}>{u.name}</Text>
                            <Text style={styles.position}>{u.position}</Text>
                        </View>
                    );
                })}
            </Card>

            <PricingCard
                color={lightColors.secondary2}
                title="现在开始体验"
                price="￥0"
                info={['免费使用', '体验不同的生活方式', '现在进入百草园']}
                button={{ title: ' GET STARTED', icon: 'flight-takeoff' }}
                onButtonPress={() => navigation.navigate('News')}
            />
        </View>
    </ScrollView>
}
const styles = StyleSheet.create({
    con: {
        padding: '4%',
        backgroundColor: '#fff',
        height: '100%'
    },
    minicon: {
        borderBottomWidth: 1,
        borderBottomColor: '#BBBBBB',
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    leftcon: {
        alignItems: 'center'
    },
    container: {
        flex: 1,
    },
    fonts: {
        marginBottom: 8,
    },
    fontsCenter: {
        marginBottom: 8,
        textAlign: 'center'
    },
    user: {
        flexDirection: 'row',
        marginBottom: 6,
    },
    image: {
        width: 30,
        height: 30,
        marginRight: 10,
    },
    name: {
        fontSize: 16,
        marginTop: 5,
    },
    position: {
        marginLeft:10,
        fontSize: 16,
        marginTop: 5,
    },
})
export default Withus;